import { defineComponent, ref } from 'vue'
import {
  NButton,
  NDataTable,
  NFormItem,
  NLayout,
  NLayoutContent,
  NLayoutSider,
  NSelect,
  NSpace
} from 'naive-ui'
import { useColumns } from './use-columns'
import { useTable } from './use-table'
import styles from './index.module.scss'
import AddDataRelatedModal from '@/views/data-manage/dialog/data-catalog/add-data-related-modal'
import Graph from './components/Graph'

const DataRelatedTab = defineComponent({
  name: 'DataRelatedTab',
  props: {
    datasourceId: {
      type: Number,
      required: true
    },
    dbName: {
      type: String,
      required: true
    },
    tableName: {
      type: String,
      required: true
    }
  },
  setup() {
    const addDataRelatedModalShowRef = ref(false)
    const { state, getDataRelateds, getDataRelatedsDag, onOperationClick } =
      useTable()
    const { upstreamColumnsRef, downstreamColumnsRef } =
      useColumns(onOperationClick)

    return {
      addDataRelatedModalShowRef,
      state,
      getDataRelateds,
      getDataRelatedsDag,
      upstreamColumnsRef,
      downstreamColumnsRef
    }
  },
  created() {
    this.state.datasourceId = this.datasourceId
    this.state.dbName = this.dbName
    this.state.tableName = this.tableName
    this.getDataRelateds()
    this.getDataRelatedsDag()
  },
  methods: {
    onUpdatedList() {
      this.getDataRelateds()
    },
    handleDepthChange(value: number) {
      this.state.edges = []
      this.state.nodes = []
      this.state.depth = value
      this.getDataRelatedsDag()
    }
  },
  render() {
    return (
      <div class={styles.container}>
        <div class={styles.up}>
          <NSpace justify='space-between'>
            <h3>{window.$t('dataManage.upstreamTable')}</h3>

            <AddDataRelatedModal
              showModal={this.addDataRelatedModalShowRef}
              onModalShowChange={() => {
                this.addDataRelatedModalShowRef = false
              }}
              onRefreshList={this.onUpdatedList}
              datasourceId={this.datasourceId}
              dbName={this.dbName}
              tableName={this.tableName}
            />
            <NButton
              type='info'
              size='small'
              onClick={() => {
                this.addDataRelatedModalShowRef = true
              }}
              style='margin-top:16px'
            >
              {window.$t('dataManage.addRelated')}
            </NButton>
          </NSpace>
          <NDataTable
            row-class-name='items'
            columns={this.upstreamColumnsRef.upstreamColumns}
            size='small'
            single-line={false}
            data={this.state.upstreamRelated}
            loading={this.state.loading}
            scrollX={this.upstreamColumnsRef.tableWidth}
          />
        </div>
        <div class={styles.down}>
          <h3>{window.$t('dataManage.downstreamTable')}</h3>
          <NDataTable
            row-class-name='items'
            columns={this.downstreamColumnsRef.downstreamColumns}
            size='small'
            single-line={false}
            data={this.state.downstreamRelated}
            loading={this.state.loading}
            scrollX={this.downstreamColumnsRef.tableWidth}
          />
        </div>
        <div class={styles.dag}>
          <h3>{window.$t('dataManage.dataRelatedDag')}</h3>
          <NLayout hasSider style='background:rgba(0,0,0,0)'>
            <NLayoutSider width={80} style='background:rgba(0,0,0,0)'>
              <NFormItem label={window.$t('dataManage.relatedDepth')}>
                <NSelect
                  options={[
                    { value: 1, label: '1' },
                    { value: 2, label: '2' },
                    { value: 3, label: '3' }
                  ]}
                  v-model:value={this.state.depth}
                  onUpdateValue={this.handleDepthChange}
                />
              </NFormItem>
            </NLayoutSider>
            <NLayoutContent style='background:rgba(0,0,0,0)'>
              {this.state.nodes.length === 0 ? (
                <div></div>
              ) : (
                <Graph
                  nodes={this.state.nodes}
                  edges={this.state.edges}
                  labelShow={true}
                />
              )}
            </NLayoutContent>
          </NLayout>
        </div>
      </div>
    )
  }
})

export default DataRelatedTab
